<template>
    <view>
        <view class="edgeInsetTop"></view>
        <view class="wanl-order">
            <!-- 头部 -->
            <view class="header">
                <image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image>
                <view class="content">
                    <view>
                        <view class="status-text" v-if="orderData.status == -1">已取消</view>
                        <view class="status-text" v-else>{{ getStatusText(orderData.status) }}</view>
                    </view>
                    <image
                        :src="$wanlshop.appstc('/order/' + getImg(orderData.status))"
                        class="status-img"
                        mode="widthFix"
                    ></image>
                </view>
            </view>
            <!-- 详情 -->
            <view class="address cu-list menu-avatar">
                <!-- 物流状态 -->
                <view class="cu-item" @tap="onLogistics(orderData.id)" v-if="logisticsType && orderData.status != -1">
                    <view class="cu-avatar round wanl-bg-blue"><text class="wlIcon-yunshuzhong"></text></view>
                    <view class="content">
                        <view>
                            <text class="text-cut-2 text-sm wanl-pip"
                                >{{ orderData.logistics.status }} - {{ orderData.logistics.context }}</text
                            >
                        </view>
                        <view class="wanl-gray">
                            <text class="text-sm">{{ orderData.logistics.time }}</text>
                        </view>
                    </view>
                    <view class="action">
                        <text class="wlIcon-fanhui2 wanl-gray"></text>
                    </view>
                </view>
                <!-- 地址 -->
                <view class="cu-item" v-if="orderData.address">
                    <view class="cu-avatar round wanl-bg-orange"><text class="wlIcon-weizhi1"></text></view>
                    <view class="content">
                        <view>
                            <text class="wanl-pip margin-right-sm">{{ orderData.address.name }}</text>
                            <text class="wanl-gray text-sm">{{ orderData.address.mobile }}</text>
                        </view>
                        <view class="wanl-pip text-cut-2 text-sm">
                            {{ orderData.address.address.replace(/\//g, " ") }}
                            <text class="margin-left-xs" v-if="orderData.address.address_name"
                                >（{{ orderData.address.address_name }}）附近</text
                            >
                        </view>
                    </view>
                </view>
            </view>
            <view class="lists bg-white" v-if="orderData.order_sn">
                <view class="shopname text-sm padding-top-bj" @tap="onShop(orderData.shop_id)">
                    <text class="wlIcon-dianpu1 margin-right-sm"></text>
                    <text class="padding-right-xs wanl-black">{{ orderData.shop.shopname }}</text>
                    <text class="wlIcon-fanhuigengduo"></text>
                </view>
                <view class="cu-list menu-avatar">
                    <block>
                        <view class="cu-item">
                            <view
                                class="cu-avatar radius"
                                :style="{
                                    backgroundImage: 'url(' + $wanlshop.oss(orderData.goods_image, 77, 77) + ')',
                                }"
                                @tap="onGoods(orderData.goods_id)"
                            ></view>
                            <view class="content" @tap="onGoods(orderData.goods_id)">
                                <view class="text-cut-2">{{ orderData.goods_name }}</view>
                                <view class="wanl_sku text-sm">
                                    <text class="wanl-gray-dark">{{ orderData.remarks }}</text>
                                </view>
                            </view>
                            <view class="action text-sm">
                                <view class="wanl-gray text-price"
                                    >{{ orderData.score }}{{ orderData.type == 2 ? "￥" + orderData.moner : "" }}</view
                                >
                                <view class="wanl-gray">x {{ orderData.goods_num }}</view>
                                <view class="text-orange"
                                    >实付 <text class="text-price">{{ orderData.money }}</text>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
                <!-- 价格信息 -->
                <view class="price padding-lr-bj padding-bottom-bj text-sm">
                    <!-- <view>
                        <text> 商品总价 </text> <text class="text-price"> {{ orderData.pay.order_price }} </text>
                    </view>
                    <view>
                        <text> 运费 </text> <text class="text-price"> {{ orderData.pay.freight_price }} </text>
                    </view>
                    <view>
                        <text> 优惠</text> <text class="text-price"> {{ orderData.pay.discount_price }} </text>
                    </view> -->
                    <view>
                        <text> 总价 </text> <text class="text-price"> {{ orderData.money }} </text>
                    </view>
                    <!-- <view class="text-sm" v-if="orderData.pay.actual_payment != 0">
                        <text> 实付款 </text> <text class="text-price wanl-orange"> {{ orderData.pay.actual_payment }} </text>
                    </view> -->
                </view>
            </view>
            <view class="order bg-white margin-top-bj padding-bj" v-if="orderData.order_sn">
                <view class="title" @tap="toMore">
                    <view class="text-sm">订单详情</view>
                    <view>
                        <text class="wlIcon-fanhui3" v-if="infoMore"></text>
                        <text class="wlIcon-fanhui4" v-else></text>
                    </view>
                </view>
                <view class="text-sm">
                    <view class="item">
                        <text class="wanl-gray" style="width: 160rpx">订单编号：</text>
                        <text> {{ orderData.order_sn }} </text>
                    </view>
                    <!-- <view class="item">
                        <text class="wanl-gray" style="width: 160rpx">支付交易号：</text>
                        <text> {{ orderData.pay.pay_no }} </text>
                    </view> -->
                    <view class="item" v-if="orderData.createtime_text">
                        <text class="wanl-gray" style="width: 160rpx">创建时间：</text>
                        <text> {{ orderData.createtime_text }} </text>
                    </view>
                    <block v-if="infoMore">
                        <view class="item" v-if="orderData.pay_time">
                            <text class="wanl-gray-dark" style="width: 160rpx">付款时间：</text>
                            <text> {{ orderData.pay_time_text }} </text>
                        </view>
                        <view class="item" v-if="orderData.delivertime_text">
                            <text class="wanl-gray-dark" style="width: 160rpx">发货时间：</text>
                            <text> {{ orderData.delivertime_text }} </text>
                        </view>
                        <view class="item" v-if="orderData.taketime_text">
                            <text class="wanl-gray-dark" style="width: 160rpx">收货时间：</text>
                            <text> {{ orderData.taketime_text }} </text>
                        </view>
                    </block>
                </view>
            </view>
            <view class="wanlian cu-bar tabbar shop solid-top foot">
                <view
                    class="margin-top margin-bottom"
                    style="display: flex; justify-content: flex-end; margin-right: 30rpx"
                    v-if="orderData.status == 1"
                >
                    <button class="cu-btn round wanl-bg-orange" @click="onWriteOff(orderData.id)" style="width: 200rpx">
                        去发货
                    </button>
                </view>
            </view>
            <view class="edgeInsetBottom"> </view>
        </view>
        <!-- 弹出层 积分-->

        <uni-popup ref="popup" type="center" background-color="#fff">
            <view style="padding: 20rpx; background-color: #fff; border-radius: 20rpx">
                <text style="font-size: 40rpx; font-weight: bold; text-align: center; display: block; padding: 20rpx"
                    >请输入快递信息</text
                >
                <view class="cu-form-group">
                    <view class="title">快递公司</view>
                    <input @tap="openGongSi" v-model="express_name" placeholder="请输入快递公司" />
                    <uv-picker ref="picker" :columns="expressList" keyName="name" @confirm="confirm"></uv-picker>
                </view>
                <view class="cu-form-group">
                    <view class="title">快递单号</view>
                    <input v-model="express.express_sn" placeholder="请输入快递单号" />
                </view>
                <view class="cu-form-group">
                    <button class="cu-btn bg-red margin-tb-sm lg" @tap="closeError">取消</button>
                    <button class="cu-btn bg-gradual-orange margin-tb-sm lg" @tap="confirmFaHuo">确定</button>
                </view>
            </view>
        </uni-popup>
        <WriteOffCode :show="isPopup" :qrcode="qrcodes" @close="close"></WriteOffCode>
    </view>
</template>

<script>
import WriteOffCode from "@/components/Write-off-code/Write-off-code";
export default {
    components: {
        WriteOffCode,
    },
    data() {
        return {
            orderData: {
                order_no: "",
                address: {
                    name: "加载中...",
                    mobile: "",
                    address: "",
                    address_name: "",
                },
                logistics: {
                    context: "",
                    status: "",
                    time: "",
                },
                statetime: "",
            },
            logisticsType: false,
            infoMore: false,
            isPopup: false, //是否显示弹出层
            qrcodes: {},
            express: {
                order_id: 0, //订单id
                express_sn: "", //快递单号
                express_company: "", //快递公司
            },

            expressList: [], //快递公司
            express_name: "", //快递公司选中的值
        };
    },
    onLoad(option) {
        this.loadData(option.order_id);
    },
    methods: {
        //选择快递公司
        openGongSi() {
            this.getExpress();
            this.$refs.picker.open();
        },
        //确认发货
        confirmFaHuo() {
            uni.showModal({
                title: "提示",
                content: "是否确认发货?",
                showCancel: true,
                success: async ({ confirm, cancel }) => {
                    if (confirm) {
                        await uni.request({
                            url: "/shop.score/DeliverOrder",
                            data: this.express,
                            success: (res) => {
                                uni.showToast({
                                    title: "发货成功",
                                    icon: "none",
                                });
                                this.$refs.popup.close();
                                this.loadData(this.express.order_id);
                            },
                            fail: (res) => {},
                        });
                    }
                },
            });
        },
        //去发货--积分
        onWriteOff(order_id) {
            this.express.order_id = order_id;
            this.$refs.popup.open("center");
        },
        //关闭弹出层
        closeError() {
            this.$refs.popup.close();
        },
        //确认选择快递公司--积分
        confirm(e) {
            this.express_name = e.value[0].name;
            this.express.express_company = e.value[0].code;
        },
        //获取快递公司
        async getExpress() {
            await uni.request({
                url: "/shop.shop/GetKuaiDiList",
                method: "POST",
                success: (res) => {
                    this.expressList = [res.res.data];
                },
            });
        },
        //关闭弹出层
        close() {
            this.isPopup = false;
        },
        // 生成核销码
        writeOff(use_code_image, use_code) {
            this.isPopup = true;
            this.qrcodes = {
                use_code_image: use_code_image,
                use_code: use_code,
            }; //核销总码
        },
        // 获取订单
        async loadData(data) {
            await uni.request({
                url: "/shop.score/GetOrderDetail",
                data: {
                    order_id: data,
                },
                success: (res) => {
                    this.orderData = res.res.data;
                    this.logisticsType = true;
                },
            });
        },
        getImg(status) {
            return [
                "img_order_payment3x.png",
                "img_order_send3x.png",
                "img_order_received3x.png",
                "img_order_signed3x.png",
                "img_order_closed3x.png",
                "img_order_signed3x.png",
                "img_order_closed3x.png",
            ][status - 1];
        },
        getStatusText(status) {
            return ["待支付", "待发货", "待收货", "待收货", "已完成", "已完成", "已关闭"][status];
        },
        getRefund(status) {
            return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
        },
        /**
         * 进入退款
         * @param {Object} order_id 订单ID
         * @param {Object} status 售后状态:0=未退款,1=退款中,2=待退货,3=退款完成
         */
        // onRefund(order_id, refund_status, refund_id, index) {
        //     if (refund_status == 0) {
        //         //申请退款
        //         this.$wanlshop.to(
        //             `/pages/user/refund/apply?data=${JSON.stringify({
        //                 order_id: this.orderData.id,
        //                 order_type: "goods",
        //                 goods: this.orderData.goods[index],
        //                 freight_type: this.orderData.freight_type,
        //                 discount_price: this.orderData.pay.discount_price,
        //                 goods_number: this.orderData.goods.length,
        //             })}`
        //         );
        //     } else {
        //         // 查看详情
        //         this.$wanlshop.to(`/pages/user/refund/details?id=${refund_id}`);
        //     }
        // },
        // 折叠项
        toMore() {
            this.infoMore = !this.infoMore;
        },
    },
};
</script>

<style>
.wanl-order .header {
    width: 100%;
    height: 180rpx;
    position: relative;
    background-color: #f72b36;
}

.wanl-order .header .img-bg {
    width: 100%;
    height: 180rpx;
}

.wanl-order .header .content {
    width: 100%;
    height: 180rpx;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60rpx;
    box-sizing: border-box;
}

.wanl-order .header .status-text {
    font-size: 34rpx;
    line-height: 34rpx;
    color: #fefefe;
}

.wanl-order .header .reason {
    font-size: 24rpx;
    line-height: 24rpx;
    color: rgba(254, 254, 254, 0.75);
    padding-top: 15rpx;
    display: flex;
    align-items: center;
}

.wanl-order .header .reason-text {
    padding-right: 12rpx;
}

.wanl-order .header .status-img {
    width: 100rpx;
    height: 100rpx;
    display: block;
}

.wanl-order .lists .shopname {
    margin: 25rpx 25rpx 30rpx 25rpx;
}

.wanl-order .lists .price > view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40rpx;
}

.wanl-order .lists .cu-btn {
    font-size: 22rpx;
    padding: 0 14rpx;
}

.cu-list.menu-avatar > .cu-item {
    height: 160rpx;
}

.cu-list.menu-avatar > .cu-item .content {
    line-height: 1.4;
}

.wanl-order .order .title {
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-between;
}

.wanl-order .order .item {
    display: flex;
    padding-top: 30rpx;
}

.wanl-order .order .foot {
    display: flex;
    justify-content: space-around;
    justify-items: center;
    align-items: center;
    padding-top: 25rpx;
    margin-top: 20rpx;
}

.wanl-order .order .foot text[class*="wlIcon-"] {
    color: #0081ff;
    margin-right: 10rpx;
    font-size: 32rpx;
}
</style>
